import { Meta } from '@storybook/blocks';

import * as TextStories from '../stories/Text.stories';

<Meta of={TextStories} />

# Text

A run of text with a single style.

## Example

```dart liveslice=Text
Text(
  'Hello, Bob! How are you?',
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  style: TextStyle(fontWeight: FontWeight.bold),
)
```

## Props

### textAlign

How the text should be aligned horizontally.

`snippet: TextPropTextAlign`

```dart liveslice=TextPropTextAlign
import 'package:flutter/material.dart';

class SnippetTextPropTextAlign extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 412,
      alignment: Alignment.center,
      child: Wrap(
        spacing: 12,
        runSpacing: 12,
        children: <Widget>[
          _DemoBox(
            label: 'TextAlign.left',
            child: Text(
              'The quick brown fox jumps over the lazy dog',
              textAlign: TextAlign.left,
            ),
          ),
          _DemoBox(
            label: 'TextAlign.right',
            child: Text(
              'The quick brown fox jumps over the lazy dog',
              textAlign: TextAlign.right,
            ),
          ),
          _DemoBox(
            label: 'TextAlign.center',
            child: Text(
              'The quick brown fox jumps over the lazy dog',
              textAlign: TextAlign.center,
            ),
          ),
          _DemoBox(
            label: 'TextAlign.justify',
            child: Text(
              'The quick brown fox jumps over the lazy dog',
              textAlign: TextAlign.justify,
            ),
          ),
          _DemoBox(
            label: 'TextAlign.start',
            child: Text(
              'The quick brown fox jumps over the lazy dog',
              textAlign: TextAlign.start,
            ),
          ),
          _DemoBox(
            label: 'TextAlign.end',
            child: Text(
              'The quick brown fox jumps over the lazy dog',
              textAlign: TextAlign.end,
            ),
          ),
        ],
      ),
    );
  }
}

class _DemoBox extends StatelessWidget {
  final String label;
  final Widget child;

  const _DemoBox({Key key, this.label, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(label, style: TextStyle(fontSize: 12)),
        SizedBox(height: 2),
        Container(
          padding: EdgeInsets.all(12),
          width: 200,
          color: Colors.blue[50],
          child: child,
        )
      ],
    );
  }
}

```

Values:

- `left`

> Align the text on the left edge of the container.

- `right`

> Align the text on the right edge of the container.

- `center`

> Align the text in the center of the container.

- `justify`

> Stretch lines of text that end with a soft line break to fill the width of the container.<br />
> Lines that end with hard line breaks are aligned towards the [start] edge.

- `start`

> Align the text on the leading edge of the container.<br />
> For left-to-right text ([TextDirection.ltr]), this is the left edge.
> For right-to-left text ([TextDirection.rtl]), this is the right edge.

- `end`

> Align the text on the trailing edge of the container.<br />
> For left-to-right text ([TextDirection.ltr]), this is the right edge.
> For right-to-left text ([TextDirection.rtl]), this is the left edge.

### textDirection

The directionality of the text.

This decides how [textAlign] values like [TextAlign.start] and
[TextAlign.end] are interpreted.

This is also used to disambiguate how to render bidirectional text. For
example, if the [data] is an English phrase followed by a Hebrew phrase,
in a [TextDirection.ltr] context the English phrase will be on the left
and the Hebrew phrase to its right, while in a [TextDirection.rtl]
context, the English phrase will be on the right and the Hebrew phrase on
its left.

Defaults to the ambient [Directionality], if any.

`snippet: TextPropTextDirection`

```dart liveslice=TextPropTextDirection
import 'package:flutter/material.dart';

class SnippetTextPropTextDirection extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 360,
      alignment: Alignment.center,
      child: Column(
        children: <Widget>[
          _DemoCard(
            label: 'TextDirection.ltr',
            child: Text(
              'The quick brown fox jumps over the lazy dog',
              textDirection: TextDirection.ltr,
            ),
          ),
          _DemoCard(
            label: 'TextDirection.rtl',
            child: Text(
              'The quick brown fox jumps over the lazy dog',
              textDirection: TextDirection.rtl,
            ),
          ),
        ],
      ),
    );
  }
}

class _DemoCard extends StatelessWidget {
  final String label;
  final Widget child;

  const _DemoCard({Key key, this.label, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(label, style: TextStyle(fontSize: 12)),
        Container(
          padding: EdgeInsets.all(12),
          margin: EdgeInsets.only(top: 2),
          color: Colors.blue[50],
          width: 200,
          child: child,
        )
      ],
    );
  }
}

```

Values:

- `rtl`

> The text flows from right to left (e.g. Arabic, Hebrew).

- `ltf`

> The text flows from left to right (e.g., English, French).

## Related Links

- https://api.flutter.dev/flutter/material/Text-class.html
